<template>
	<transition name="todo" appear>
		<li>
		  <label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo)" />
			<span v-show="!todo.isEdit">{{todo.title}}</span>
			<input 
			v-show="todo.isEdit"
			type="text"
			:value="todo.title"
			@blur="handlerBlur(todo,$event)"
			ref="inputTitle"
			/>
		  </label>
		  <button class="btn btn-danger" @click="handlerDelete(todo.id)">删除</button>
		  <button class="btn btn-edit" v-show="!todo.isEdit" @click="handlerEdit(todo)">编辑</button>
		</li>
	</transition>
</template>

<script>
	import pubsub from 'pubsub-js'
export default {
	name:'MyItem',
	props:['todo'],
	methods:{
		// 勾选/取消勾选
		handleCheck(id){
			// 通知App组件将对应的todo对象的done值取反
			//this.checkTodo(id)
			this.$bus.$emit('checkTodo',id)
		},
		// 删除
		handlerDelete(id){
			if(confirm('确定删除?')){
				console.log(id);
				//this.deleteTodo(id);
				// this.$bus.$emit('deleteTodo',id)
				pubsub.publish('deleteTodo',id)
			 }
		},
		// 失去焦点回调(真正执行修改逻辑)
		handlerBlur(todo,e){
			todo.isEdit = false
			if(!e.target.value.trim()){
				alert('输入不能为空')
				return
			}
			this.$bus.$emit('updateTodo',todo.id,e.target.value)
		},
		handlerEdit(todo){
			if(todo.hasOwnProperty('isEdit')) {
				todo.isEdit = true
			} else {
				this.$set(todo,'isEdit',true)
				console.log('todo上没有isEdit,进行设置')
			}
			// 作用:在下一次DOM更新结束后执行其指定的回调
			this.$nextTick(function(){
				this.$refs.inputTitle.focus()
			})
		}
	}
}
</script>

<style scoped>
/*item*/
	li {
	  list-style: none;
	  height: 36px;
	  line-height: 36px;
	  padding: 0 5px;
	  border-bottom: 1px solid #ddd;
	}

	li label {
	  float: left;
	  cursor: pointer;
	}

	li label li input {
	  vertical-align: middle;
	  margin-right: 6px;
	  position: relative;
	  top: -1px;
	}

	li button {
	  float: right;
	  display: none;
	  margin-top: 3px;
	}

	li:before {
	  content: initial;
	}

	li:last-child {
	  border-bottom: none;
	}
	li:hover{
		background-color: #ddd;
	}
	li:hover button{
		display:block;
	}
	.todo-enter-active {
		animation: sx 0.5s linear;
	}
	.todo-leave-active{
		animation: sx 0.5s linear reverse;
	}
	@keyframes sx{
		from{
			transform: translateX(100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>
